<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>the view html</title>
    <link rel="stylesheet" type="text/css" href='/trail.css'>
    <script crossorigin="anonymous"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <main class="main">
        <nav>
            <a href="#">首页</a>
            <a href="#">个人信息</a>
            <a href="#">借阅图书</a>
            <a href="#">关于我们</a>
            <div class="animation" start-home></div>
        </nav>
        <div class="search">
            <input type="text" placeholder=" Why Not Search The Fonding Book Yourself!!" autofocus />
            <span class="circle"></span>
            <span class="handle"></span>
        </div>
        
        <section class="list-item">
            <div class="item-image">
                <img src="/src//assets//image/home/Computer Science.jpg" alt="picture_1">
            </div>
            <div class="item-text">
                <div class="text-title">Computer Science</div>
                <div class="text-desc">探索奇妙的「coding」世界</div>
            </div>
        </section>

        <section class="list-item">
            <div class="item-image">
                <img src="image/art.jpg" alt="picture_2">
            </div>
            <div class="item-text">
                <div class="text-title">Art</div>
                <div class="text-desc"> 热爱 想象 创造</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="image/humanity.jpg" alt="picture_3">
            </div>
            <div class="item-text">
                <div class="text-title">humanity</div>
                <div class="text-desc">纵观社会发展全貌</div>
            </div>
        </section>
        <section class="list-item">
            <div class="item-image">
                <img src="image/medicine.jpg" alt="picture_4">
            </div>
            <div class="item-text">
                <div class="text-title">medicine</div>
                <div class="text-desc">生命与未来</div>
            </div>
        </section>
    </main>
</body>

</html>